<div class="card">
  <div class="card-header">Upload File</div>
  <div class="card-body">
    <div class="row" [hidden]="!postError" class="alert alert-danger">
      {{ postErrorMessage }}
    </div>
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
          <input
            id="name"
            name="name"
            class="form-control"
            [(ngModel)]="file.name"
            required
            #nameField="ngModel"
            (blur)="onBlur(nameField)"
            [class.is-invalid]="form.submitted && nameField.invalid"
          />
          <span class="invalid-feedback"> Enter a name </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="description" class="col-sm-2 col-form-label"
          >Description</label
        >
        <div class="col-sm-10">
          <input
            id="description"
            name="description"
            class="form-control"
            [(ngModel)]="file.description"
            required
            #descriptionField="ngModel"
            (blur)="onBlur(descriptionField)"
            [class.is-invalid]="form.submitted && descriptionField.invalid"
          />
          <span class="invalid-feedback"> Enter a description </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="formFile" class="col-sm-2 col-form-label">File</label>
        <div class="col-sm-10">
          <input
            id="formFile"
            type="file"
            name="formFile"
            class="form-control"
            required
            (change)="handleFileInput($event.target.files)"
            [class.is-invalid]="form.submitted && !file.formFile"
          />
          <span class="invalid-feedback"> Select a file </span>
        </div>
      </div>
      <div class="form-group row">
        <label for="encrypted" class="col-sm-2 col-form-label">Encrypted</label>
        <div class="col-sm-10">
          <input
            type="checkbox"
            id="encrypted"
            name="encrypted"
            [(ngModel)]="file.encrypted"
          />
        </div>
      </div>
      <div class="form-group row">
        <label for="description" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
          <button class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-footer">
    <a
      class="btn btn-outline-secondary"
      [routerLink]="['/files']"
      style="width: 80px"
    >
      <i class="fa fa-chevron-left"></i> Back
    </a>
  </div>
</div>
